<template>
  <div class="item new-plan-h plan-h">
    <i class="icon" :class="iconClass"></i>
    <b class="ftz16">{{title}}</b>
    <slot name="btns"></slot>
  </div>
</template>

<script>
export default {
  props: [
    'title',
    'iconClass'
  ],
  data () {
    return {

    }
  }
}
</script>

<style scoped lang="scss">
.plan-h{
    height: 50px;
    line-height: 50px;
    padding: 0 16px;
}
.plan-h .icon{
    display: inline-block;
    vertical-align: middle;
    background-image: url('../../assets/res/img/icon.png');
    background-repeat: no-repeat;
}
.new-plan-h .icon-new{
    width: 22px;
    height: 28px;
    background-position: -25px -80px;
    margin: -4px 6px 0 0;
}
.new-plan-h .icon-change{
    width: 22px;
    height: 22px;
    background-position: -58px -80px;
    margin-right: 4px;
}
.new-plan-h a{
    color: #808080;
    margin-left: 24px;
}
.icon-hot{
    width: 24px;
    height: 30px;
    background-position: -94px -80px;
    margin: -4px 6px 0 0;
}
</style>
